<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>交易概述</title>
<style>
.tile-stats h3{
  font-size:14px;
}
.tile-stats .count {
    font-size: 26px;
}
.hidChart{
  visibility: hidden;
  height: 0px;
  overflow: hidden;
}
.col-lg-3 { width:20%;}
</style>
</head>
<body>
<div class="row top_tiles">
    <div class="animated flipInY col-lg-3 col-md-3 col-sm-6 col-xs-12">
        <div class="tile-stats">
            <div class="icon"><i class="fa fa-money" style="color: #e25a5a;"></i></div>
            <div class="count">${tradeTotal!0}</div>
            <h3>交易总金额</h3>
            <!--<p>Lorem ipsum psdea itgum rixt.</p>-->
            <p>&nbsp;</p>
        </div>
    </div>
    <div class="animated flipInY col-lg-3 col-md-3 col-sm-6 col-xs-12">
        <div class="tile-stats">
            <div class="icon" style="right:40px;"><i class="fa fa-rmb" style="color: #eb5405;"></i></div>
            <div class="count">${pinganTotal!0}万</div>
            <h3>平安易宝总流水</h3>
            <!--<p>Lorem ipsum psdea itgum rixt.</p>-->
            <p>&nbsp;</p>
        </div>
    </div>
    <div class="animated flipInY col-lg-3 col-md-3 col-sm-6 col-xs-12">
        <div class="tile-stats">
            <div class="icon"><i class="fa fa-book" style="color: #09835a;"></i></div>
            <div class="count">${tradeCount!0}</div>
            <h3>已完成订单总数</h3>
            <!--<p>Lorem ipsum psdea itgum rixt.</p>-->
            <p>&nbsp;</p>
        </div>
    </div>
    <div class="animated flipInY col-lg-3 col-md-3 col-sm-6 col-xs-12">
        <div class="tile-stats">
            <div class="icon"><i class="fa fa-group" style="color: #568ebf;"></i></div>
            <div class="count">${tradePurchaserCount!0}</div>
            <h3>参与交易采购商</h3>
            <!--<p>Lorem ipsum psdea itgum rixt.</p>-->
            <p>&nbsp;</p>
        </div>
    </div>
    <div class="animated flipInY col-lg-3 col-md-3 col-sm-6 col-xs-12">
        <div class="tile-stats">
            <div class="icon"><i class="fa fa-group" style="color: #8775a7;"></i></div>
            <div class="count">${tradeProviderCount!0}</div>
            <h3>参与交易供应商</h3>
            <!--<p>Lorem ipsum psdea itgum rixt.</p>-->
            <p>&nbsp;</p>
        </div>
    </div>
</div>

<!-- 双Y轴单线图 -->
<div class="row">
    <div class="col-md-6 col-sm-6 col-xs-12">
        <div class="x_panel">
            <div class="x_title">
                <h2>新增订单总数及增长率</h2>
                <ul class="nav navbar-right panel_toolbox" style="margin-left: 15px;">
                    <li><a class="collapse-link" onclick="changeDisplay('addOrderCountChart' , 'aCTable1');"><i
                            class="fa fa-line-chart"></i></a></li>
                    <li><a class="collapse-link" onclick="changeDisplay('aCTable1' , 'addOrderCountChart');"><i
                            class="fa fa-table"></i></a></li>
                    <li><a class="collapse-link" onclick="exporTradeDetailExcel(0)"><i class="fa fa-download"></i></a></li>
                </ul>
                <div style="float: right;">
                <div class="controls input-append date form_date addCDate" data-date="" data-date-format="dd MM"
                     data-link-field="addCDate1" data-link-format="yyyy-mm" style="margin-right: 3px;">
                    <span class="add-on"><i class="icon-th"></i></span>
                    <input id="addCDateHM1" size="16" type="text" value="" readonly>
                </div>
                —
                <input type="hidden" id="addCDate1" value=""/>
                <div class="controls input-append date form_date addCDate" data-date="" data-date-format="dd MM"
                     data-link-field="addCDate2" data-link-format="yyyy-mm">
                    <span class="add-on"><i class="icon-th"></i></span>
                    <input id="addCDateHM2" size="16" type="text" value="" readonly>
                </div>
                <input type="hidden" id="addCDate2" value=""/>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="x_content" style="height: 350px;">
                <div id="addOrderCountChart">
                    <div id="hcForOrderCount" style="height: 350px"></div>
                </div>
                <div class="hidChart" id="aCTable1">
                    <table id="addOrderCountTable" class="table table-striped table-bordered" style="width: 100%;">
                        <thead>
                        <tr>
                            <th>序号</th>
                            <th>月份</th>
                            <th>新增订单数量</th>
                            <th>增长率</th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    
        <div class="col-md-6 col-sm-6 col-xs-12">
        <div class="x_panel">
            <div class="x_title">
                <h2>订单总金额及增长率</h2>
                <ul class="nav navbar-right panel_toolbox" style="margin-left: 15px;">
                    <li><a class="collapse-link" onclick="changeDisplay('addOrderTotalChart' , 'aCTable2');"><i
                            class="fa fa-line-chart"></i></a></li>
                    <li><a class="collapse-link" onclick="changeDisplay('aCTable2' , 'addOrderTotalChart');"><i
                            class="fa fa-table"></i></a></li>
                    <li><a class="collapse-link" onclick="exporTradeDetailExcel(1)"><i class="fa fa-download"></i></a></li>
                </ul>
                <div style="float: right;">
                <div class="controls input-append date form_date addTDate" data-date="" data-date-format="dd MM"
                     data-link-field="addTDate1" data-link-format="yyyy-mm" style="margin-right: 3px;">
                    <span class="add-on"><i class="icon-th"></i></span>
                    <input id="addTDateHM1" size="16" type="text" value="" readonly>
                </div>
                —
                <input type="hidden" id="addTDate1" value=""/>
                <div class="controls input-append date form_date addTDate" data-date="" data-date-format="dd MM"
                     data-link-field="addTDate2" data-link-format="yyyy-mm">
                    <span class="add-on"><i class="icon-th"></i></span>
                    <input id="addTDateHM2" size="16" type="text" value="" readonly>
                </div>
                <input type="hidden" id="addTDate2" value=""/>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="x_content" style="height: 350px;">
                <div id="addOrderTotalChart">
                    <div id="hcForOrderTotal" style="height: 350px"></div>
                </div>
                <div class="hidChart" id="aCTable2">
                    <table id="addOrderTotalDataTable" class="table table-striped table-bordered" style="width: 100%;">
                        <thead>
                        <tr>
                            <th>序号</th>
                            <th>月份</th>
                            <th>新增订单金额</th>
                            <th>增长率</th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    
</div>
<!-- 双线图加饼状图 -->
<div class="row">
    <div class="col-md-8 col-sm-8 col-xs-12">
        <div class="x_panel">
            <div class="x_title">
                <h2>自营商城&第三方商铺订单数量及金额</h2>
                <ul class="nav navbar-right panel_toolbox" style="margin-left: 15px;">
                    <li><a class="collapse-link" onclick="changeDisplay('addOrderCountTotalChart' , 'aCTable3');"><i
                            class="fa fa-line-chart"></i></a></li>
                    <li><a class="collapse-link" onclick="changeDisplay('aCTable3' , 'addOrderCountTotalChart');"><i
                            class="fa fa-table"></i></a></li>
                    <li><a class="collapse-link" onclick="exporTradeDetailExcel(2)"><i class="fa fa-download"></i></a></li>
                </ul>
                <div style="float: right;">
                <div class="controls input-append date form_date addCTDate" data-date="" data-date-format="dd MM"
                     data-link-field="addCTDate1" data-link-format="yyyy-mm" style="margin-right: 3px;">
                    <span class="add-on"><i class="icon-th"></i></span>
                    <input id="addCTDateHM1" size="16" type="text" value="" readonly>
                </div>
                —
                <input type="hidden" id="addCTDate1" value=""/>
                <div class="controls input-append date form_date addCTDate" data-date="" data-date-format="dd MM"
                     data-link-field="addCTDate2" data-link-format="yyyy-mm">
                    <span class="add-on"><i class="icon-th"></i></span>
                    <input id="addCTDateHM2" size="16" type="text" value="" readonly>
                </div>
                <input type="hidden" id="addCTDate2" value=""/>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="x_content" style="height: 350px;">
                <div id="addOrderCountTotalChart">
                    <div id="hcForOrderCountTotal" style="height: 350px"></div>
                </div>
                <div class="hidChart" id="aCTable3">
                    <table id="addOrderCountTotalDataTable" class="table table-striped table-bordered" style="width: 100%;">
                        <thead>
                        <tr>
                            <th>序号</th>
                            <th>月份</th>
                            <th>自盈商城总金额</th>
                            <th>第三方总金额</th>
                            <th>总金额</th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 饼状图 -->
    <div class="col-md-4 col-sm-6 col-xs-12">
        <div class="x_panel">
            <div class="x_title">
                <h2>商品订单和项目订单金额占比</h2>
                <!--<ul class="nav navbar-right panel_toolbox">-->
                    <!--<li style="float: right;"><a class="collapse-link"><i class="fa fa-download"></i></a></li>-->
                <!--</ul>-->
                <div class="clearfix"></div>
            </div>
            <div class="x_content" style="height:352px;">
                <div id="productOrderChart" style="height:352px;"></div>
            </div>
        </div>
    </div>
    
</div>

<div class="row">
<!--各品类订单金额占比  -->
    <div class="col-md-8 col-sm-8 col-xs-12">
        <div class="x_panel">
            <div class="x_title">
                <h2>各品类订单金额占比</h2>
                <!--<ul class="nav navbar-right panel_toolbox">-->
                    <!--<li style="float: right;"><a class="collapse-link"><i class="fa fa-download"></i></a></li>-->
                <!--</ul>-->
                <div class="clearfix"></div>
            </div>
            <div class="x_content" style="height: 352px">
                <div id="orderTypeTotalPie" style="height:352px;"></div>
            </div>
        </div>
    </div>
    
    <!-- 各状态订单占比  -->
    <div class="col-md-4 col-sm-6 col-xs-12">
        <div class="x_panel">
            <div class="x_title">
                <h2>各状态订单占比</h2>
                <!--<ul class="nav navbar-right panel_toolbox">-->
                    <!--<li style="float: right;"><a class="collapse-link"><i class="fa fa-download"></i></a></li>-->
                <!--</ul>-->
                <div class="clearfix"></div>
            </div>
            <div class="x_content" style="height:352px;">
                <div id="orderStateChart" style="height:352px;"></div>
            </div>
        </div>
    </div>
    
</div>

<!-- 列表页 -->
<div class="row">
    <div class="col-md-4 col-sm-6 col-xs-12">
        <div class="x_panel">
            <div class="x_title">
                <h2>当前各品类商品浏览量</h2>
                <!--<ul class="nav navbar-right panel_toolbox" style="min-width: auto;">-->
                    <!--<li style="float: right;"><a class="collapse-link"><i class="fa fa-download"></i></a></li>-->
                <!--</ul>-->
                <div class="clearfix"></div>
            </div>
            <div class="x_content">
                <table id="viewNumTable" class="table table-striped table-bordered">
                    <thead>
                    <tr>
                        <!--<th>序号</th>-->
                        <th>类目名称</th>
                        <th style="min-width: 55px;">浏览量</th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="col-md-4 col-sm-6 col-xs-12">
        <div class="x_panel">
            <div class="x_title">
                <h2>采购金额排名前十的采购商</h2>
                <!--<ul class="nav navbar-right panel_toolbox" style="min-width: auto;">-->
                    <!--<li style="float: right;"><a class="collapse-link"><i class="fa fa-download"></i></a></li>-->
                <!--</ul>-->
                <a class="more" href="#/project/detail" onclick="pjaxContent('/trade/tradedetail?type=4')">more >></a>
                <div class="clearfix"></div>
            </div>
            <div class="x_content">
                <table id="buyerTotalPriceTable" class="table table-striped table-bordered">
                    <thead>
                    <tr>
                        <th>采购商</th>
                        <th style="min-width: 55px;">总金额</th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="col-md-4 col-sm-6 col-xs-12">
        <div class="x_panel">
            <div class="x_title">
                <h2>订单金额排名前十的供应商</h2>
                <!--<ul class="nav navbar-right panel_toolbox" style="min-width: auto;">-->
                    <!--<li style="float: right;"><a class="collapse-link"><i class="fa fa-download"></i></a></li>-->
                <!--</ul>-->
                <a class="more" href="#/project/detail" onclick="pjaxContent('/trade/tradedetail?type=5')">more >></a>
                <div class="clearfix"></div>
            </div>
            <div class="x_content">
                <table id="sellerTotalPriceTable" class="table table-striped table-bordered">
                    <thead>
                    <tr>
                        <th>供应商</th>
                        <th style="min-width: 55px;">总金额</th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<script src="/res/build/js/common/common.js"></script>
<script src="/res/build/js/trade/tradeview.js"></script>
</body>
</html>